<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": ""
  }
}
</route>

<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
    default: 2,
  },
});
const emit = defineEmits(["update:modelValue"]);

const lineWidth = ref(props.modelValue);
const show = ref(false);

const lineSelect = () => {
  // emit("update:modelValue", e.hex);
};

const handleChange = (e) => {};
const handleClose = (e) => {
  show.value = false;
};

const dragend = (e) => {
  emit("update:modelValue", e.value);
};
</script>

<template>
  <view class="h-[40px] min-w-[40px] flex justify-center items-center">
    <!-- <wd-popover @change="handleChange" placement="top"> -->
    <view
      class="bg-black h-[20px]"
      :style="{
        width: props.modelValue + 'px',
      }"
      @click="show = !show"
    ></view>
    <wd-popup v-model="show" @close="handleClose" position="bottom" closable >
      <view class="w-full py-3 px-3 box-border">
        <view class="font-bold text-[18px] mb-3">线宽</view>
        <wd-slider v-model="lineWidth" :min="1" :max="40" @dragend="dragend" :step="1" />
      </view>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
